import React, { useState } from 'react';
import { IconButton, Stack, Callout} from 'office-ui-fabric-react';
import { initializeIcons } from '@uifabric/icons';
import { useId } from '@uifabric/react-hooks';

initializeIcons()

const iconProps = { iconName: 'Info' };
const iconButtonStyles = { 
	root: { 
        marginBottom: -3,
    } 
};

const stackTokens = {
    childrenGap: 4,
    maxWidth: 300,
};
  
const labelCalloutStackStyles = { root: { padding: 20 } };


const TextFieldTip = props => {

    const { tip} = props;
    const [ ifShow, setIfShow ] = useState(false);
    const iconButtonId = useId('iconButton');
    
    return (
        <>
        {
            tip ? (
                <IconButton
                    iconProps={iconProps}
                    title="Info"
                    onClick={()=>setIfShow(!ifShow)}
                    styles={iconButtonStyles}
                    id={iconButtonId}
                />
            ) : null
        }
        {ifShow && (
            <Callout
                setInitialFocus
                onDismiss={()=>setIfShow(!ifShow)}
                target={'#' + iconButtonId}
            >
                <Stack tokens={stackTokens} horizontalAlign="start" styles={labelCalloutStackStyles}>
                    <span>{tip}</span>
                </Stack>
            </Callout>
        )}
        </>
    )
}

export default TextFieldTip;